<template>
  <el-row class="bgf">
    <el-form label-width="100px" :model="forminfo" :rules="rules" ref="forminfo">
      <el-tabs v-model="tabIndex">
        <el-tab-pane label="基本信息" name="1">
          <el-col :span="12" :offset="5">
            <el-form-item label="一级分类" prop="first_cateid">
              <el-select v-model="forminfo.first_cateid" @change="topChange" placeholder="请选择">
                <el-option label="请选择" value></el-option>
                <el-option
                  v-for="item in toplist"
                  :label="item.catename"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级分类" prop="first_cateid">
              <el-select v-model="forminfo.second_cateid" placeholder="请选择">
                <el-option label="请选择" value></el-option>
                <el-option
                  v-for="item in secondlist"
                  :label="item.catename"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsname">
              <el-input v-model="forminfo.goodsname"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="price">
              <el-input v-model="forminfo.price"></el-input>
            </el-form-item>
            <el-form-item label="市场价格" prop="market_price">
              <el-input v-model="forminfo.market_price"></el-input>
            </el-form-item>
            <el-form-item label="商品图片" prop="img">
              <!-- 上传组件 -->
              <!-- action 属性： 上传地址！ 如果写了地址，那么选择图片之后就会自动上传！  -->
              <!-- list-type属性： 上传控件的类型 -->
              <!-- file-list属性： 文件列表  [{name:'',url:""}] -->
              <!-- limit属性：上传最大个数 -->
              <!-- on-change: 图片变了的时候 -->
              <!-- name属性： 上传的对应字段 -->
              <!-- auto-upload:是否自动上传 -->
              <el-upload
                action="#"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :file-list="fileList"
                :limit="4"
                :on-change="fileChange"
                :auto-upload="false"
                :on-exceed="limitImg"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
              <!-- 弹框 -->
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </el-form-item>
            <el-form-item label="商品规格" prop="specsid">
              <el-select v-model="forminfo.specsid" @change="specsChange" placeholder="请选择">
                <el-option label="请选择" value></el-option>
                <el-option
                  v-for="item in specslist"
                  :label="item.specsname"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="规格属性值" prop="specsattr">
              <el-select v-model="forminfo.specsattr" multiple  placeholder="请选择">
                <el-option label="请选择" value></el-option>
                <el-option
                  v-for="item in specsvaluelist"
                  :label="item"
                  :value="item"
                  :key="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否新品" prop="isnew">
              <el-radio v-model="forminfo.isnew" :label="1">是</el-radio>
              <el-radio v-model="forminfo.isnew" :label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="是否热卖" prop="ishot">
              <el-radio v-model="forminfo.ishot" :label="1">是</el-radio>
              <el-radio v-model="forminfo.ishot" :label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-radio v-model="forminfo.status" :label="1">正常</el-radio>
              <el-radio v-model="forminfo.status" :label="0">禁用</el-radio>
            </el-form-item>
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="详细描述" name="2">
          <el-col :span="20">
              <!-- 编辑器 -->
              <vue-wangeditor id="editor" ref="editor"  width="100%"  v-model="forminfo.description"></vue-wangeditor>
              <br><br>
          </el-col>
        </el-tab-pane>
      </el-tabs>
      <br>
      <el-form-item>
        <el-button type="primary" v-if="!$route.params.id" @click="submit">立即添加</el-button>
        <el-button type="success" v-else @click="submit">立即修改</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
// 导入编辑器插件
import vueWangeditor from 'vue-wangeditor'
// 如何区分是添加还是修改页面！
// 根据路由是否传入的 动态参数！  this.$route.params.id  修改！
import {  getCategory,getChildCategory } from "@/request/category";
import {  getSpecs } from "@/request/specs"
import {  addGoods,editGoods,getGoods } from "@/request/goods"
let defaultInfo = {}; // 修改的时候的重置！
export default {
  data() {
    return {
      forminfo: {
        first_cateid: "", // 一级分类id
        second_cateid: "", // 二级分类id
        goodsname: "", // 商品名称
        price: "", // 商品价格
        market_price: "", // 市场价格
        description: "", // 商品详情
        specsid: "", // 属性名id
        specsattr: [], // 属性值
        isnew: 0, // 是否新品
        ishot: 0, // 是否热门
        img: "", // 商品图片
        status: 1 // 状态
      },
      rules: {
        // 表单的验证规则
        first_cateid: [
          { required: true, message: "一级分类名称必须选", trigger: "blur" }
        ],
        second_cateid: [
          { required: true, message: "二级分类必须选", trigger: "blur" }
        ],
        goodsname: [
          { required: true, message: "商品名称必须", trigger: "blur" }
        ],
        price: [{ required: true, message: "商品价格必须", trigger: "blur" }],
        market_price: [{ required: true, message: "市场价格必须", trigger: "blur" }],
        specsid: [{ required: true, message: "规格名必须", trigger: "blur" }],
        specsattr: [{ required: true, message: "规格值必须", trigger: "blur" }]
      },
      tabIndex: "1",
      toplist: [], //一级分类列表,用于下拉列表！
      secondlist: [], // 二级分类列表,用于下拉列表！
      specslist:[],  //商品规格列表
      specsvaluelist:[], // 某规格对应的属性数据
      dialogVisible: false, // 弹框
      dialogImageUrl: "", // 弹框图片地址
      fileList: [] // 上传文件列表
    };
  },
  created() {
    this.getlist(); // 获取列表
    if (this.$route.params.id) {
      // 获取修改的这一条的数据，赋给表单！
      this.getinfo(this.$route.params.id);
    }
  },
  methods: {
    async getlist() {
      // 获取一级分类列表
      this.toplist = await getCategory();
      // 获取规格列表
      this.specslist = await getSpecs();
      
    },
    async getinfo(id) {
      // 获取修改数据，赋给表单！
      this.forminfo = await getGoods({id});
      // 还要读取当前商品的一级分类id对应的二级分类列表
      this.topChange(this.forminfo.first_cateid);     
      // 回显图片
      let url = this.forminfo.img ? this.$HOST + this.forminfo.img : "";
      if (url) {
        this.fileList.push({ name: this.forminfo.catename, url });
      }
      // 回显规格
      // 读取当前商品规格ID，获取该规格ID下面的属性值
      this.specsChange(this.forminfo.specsid)
      this.forminfo.specsattr = this.forminfo.specsattr.split(",")

      // 赋给一个临时变量，用于重置的时候再次赋值！
      defaultInfo = { ...this.forminfo };
    },
    submit() {
      // 提交数据 【添加、修改】
      this.$refs.forminfo.validate(async isok => {
        if (isok) {
          // 发送请求！
          // 追加编辑器的内容
          this.forminfo.description = this.$refs.editor.getHtml();
          // 处理规格
          this.forminfo.specsattr = this.forminfo.specsattr.join(",")
          // 使用FormData提交数据！
          let formdata = new FormData();
          for (let k in this.forminfo) {
            formdata.append(k, this.forminfo[k]);
          }
          let res;
          if (this.$route.params.id) {
            formdata.append("id", this.$route.params.id); // 给表单数据添加上id
            res = await editGoods(formdata); // 修改请求
          } else {
            // 提交的是formdata实例对象
            res = await addGoods(formdata); // 添加请求
          }
          if (res) {
            this.$router.back();
          }
        } else {
          this.$message.warn("验证不通过");
        }
      });
    },
    reset() {
      // 重置
      // resetFields表单重置！
      if (this.$route.params.id) {
        this.fileList = [];
        this.getinfo(this.$route.params.id);
      } else {
        // 添加重置
        this.$refs.forminfo.resetFields();
        this.fileList = [];
      }
    },
    // 上传空间的相关事件
    handlePictureCardPreview(file) {
      // 预览事件
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    fileChange(file) {
      // 文件改变时候触发
      // file.raw 才是原生的文件信息！
      this.forminfo.img = file.raw;
    },
    limitImg() {
      this.$message.warning("分类图片最多添加4个");
    },
    async topChange(val){
        // 如果选择了一级，就要去寻找一级对应的二级分类菜单
        if(val){ // val就是一级分类的id
           this.secondlist  = await getChildCategory(val);
        }else{
          this.secondlist = [];
          this.forminfo.second_cateid = "";
        }
    },
    async specsChange(val){
        if(val){ // val就是规格名id
           let res  = await getSpecs(val);
           this.specsvaluelist = res.attrs;
        }else{
          this.specsvaluelist = [];
          this.forminfo.specsattr = [];
        }
    }

  },
  components: { 
    vueWangeditor
  }
};

// 图片上传：
// 两种思路：
// 1、先上传图片，然后接口返回上传好的图片地址， 将地址赋给变量字段连通表单其他数据一起提交！
// 2、图片数据和表单字段信息所有的数据一起提交 （ ！！！注意： 使用FormData对象进行提交！ ）
// let formdata =  new FormData();
// formdata.append('字段名',数据)
// 发送ajax , 提交的数据就是这个formdata


// 编辑器wangeditor插件使用  
  // 安装npm install --save vue-wangeditor
  /*
  <template>
    <vue-wangeditor id="editor" v-model="text></vue-wangeditor>
  </template>

  import vueWangeditor from 'vue-wangeditor'
  export default {
    ...
    components: {
      vueWangeditor
    }
  }

  */

</script>
<style scoped>
</style>